<template>
	<view class="auth-box">
		<view class="white-bg">
			<view class="fw-b font-s-16">身份证照</view>
			<view class="flex-between-center mar-t-15">
				<view class="idcard-item"  @click="choosePhoto('idCardBackPhoto')">
					<template v-if="form.idCardBackPhoto">
						<u-image :src="form.idCardBackPhoto" width="316" height="208" border-radius="24"></u-image>
						<view class="re-upload" v-if="!form.isThreeFactor">重新上传</view>
					</template>
					<template v-else>
						<static-image src="/pagesA/static/img/setting/idcard-front.png" width="316" height="208"></static-image>
					</template>
					<text>上传身份证人像面</text>
				</view>
				<view class="idcard-item" @click="choosePhoto('idCardFrontPhoto')">
					<template v-if="form.idCardFrontPhoto">
						<u-image :src="form.idCardFrontPhoto" width="316" height="208" border-radius="24"></u-image>
						<view class="re-upload" v-if="!form.isThreeFactor">重新上传</view>
					</template>
					<template v-else>
						<static-image src="/pagesA/static/img/setting/idcard-back.png" width="316" height="208"></static-image>
					</template>
					<text>上传身份证国徽面</text>
				</view>
			</view>
		</view>
		<view class="white-bg" style="padding-bottom: 0;">
			<view class="fw-b font-s-16">
				身份信息
			</view>
			<view class="mar-t-8">
				<view class="form-item-list">
					<view class="label">真实姓名</view>
					<text v-if="form.name">{{form.name}}</text>
					<text class="color-999" v-else>上传证件后自动识别</text>
					
				</view>
				<view class="form-item-list">
					<view class="label">身份证号</view>
					<text v-if="form.idCard">{{form.idCard}}</text>
					<text class="color-999" v-else>上传证件后自动识别</text>	
				</view>
				<view class="form-item-list line-none">
					<view class="label">手机号码</view>
					<text>{{form.phone}}</text>
				</view>
			</view>
		</view>
		<footer-btn v-if="!form.isThreeFactor || form.isFaceOrc!=1">
			<u-button
				v-if="!form.isThreeFactor"
				type="primary"
				shape="circle"
				@click="submit"
				:custom-style="{background:'#1F78FF',height:'96rpx',fontSize:'32rpx',fontWeight:'bold'}">
				确认提交
			</u-button>
			<u-button
				v-else-if="form.isFaceOrc!=1"
				type="warning"
				shape="circle"
				@click="faceOrc"
				:custom-style="{height:'96rpx',fontSize:'32rpx',fontWeight:'bold'}">
				活体认证
			</u-button>
		</footer-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				houseId:''
			}
		},
		onLoad(e){
			this.from = e.from || 1
			this.getUserInfo()
		},
		methods: {
			getUserInfo(){
				this.$request({
					url: '/loginUserInfo/getDetail',
					method: 'get'
				}).then(res => {
					this.form = res.data
				})
			},
			submit() {	
				if(!this.form.idCardBackPhoto || !this.form.idCardFrontPhoto){
					this.$u.toast('请先上传身份证正反面照片')
					return;
				}
				if(!this.form.phone) {
					this.$u.toast('请先输入手机号')
					return;
				}
				this.$request({
					url: '/loginUserInfo/thridIdentityAuthenSubmit',
					method: 'post',
					data:this.form
				}).then(res => {
					this.form.isThreeFactor = 1
					this.$u.toast('身份认证成功，请进行活体认证')
				})
			},
			choosePhoto(key) {
				if(this.form.isThreeFactor) {
					return this.$common.previewImage([this.form.idCardBackPhoto,this.form.idCardFrontPhoto],key=='idCardBackPhoto'?0:1)
				}
				uni.chooseImage({
					count:1,
				    success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading()
						uni.uploadFile({
							url: this.baseUrl+'/common/upload',
							header:{
								'Authorization': uni.getStorageSync('token'),
							},
							filePath: tempFilePaths[0],
							name: 'file',
							complete: (res) => {
								uni.hideLoading()
								this.form[key] = JSON.parse(res.data).url
								if(this.form.idCardBackPhoto && this.form.idCardFrontPhoto){
									this.identityAuthen()
								}
							}
						});
				    }
				});
			},
			identityAuthen() {
				uni.showLoading()
				this.$request({
					url: '/loginUserInfo/thridIdentityAuthen',
					method: 'post',
					data:{idCardBackPhoto:this.form.idCardBackPhoto,idCardFrontPhoto:this.form.idCardFrontPhoto}
				}).then(res => {
					this.form = Object.assign(this.form,res.data)
				}).catch(err=>{
					this.form.idCardBackPhoto = ''
					this.form.idCardFrontPhoto = ''
				})
			},
			faceOrc(){
				uni.showLoading()
				this.$request({
					url: '/loginUserInfo/ocrFaceAuthen',
					method: 'post',
					data:{backUrl:this.from==1?'pagesA/applyFor/index':'pages/mine/index'}
				}).then(res => {
					window.location.href = res.data.certifyUrl
				})
			}
		}
	}
</script>

<style lang="scss">
	.auth-box{
		padding: 24rpx;
		.white-bg{
			background: #fff;
			border-radius: 24rpx;
			padding: 32rpx 24rpx;
			margin-bottom: 24rpx;
			.idcard-item{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: relative;
				>text{
					font-size: 28rpx;
					margin-top: 24rpx;
				}
				.re-upload{
					width: 100%;
					height: 56rpx;
					background: rgba(0,0,0,0.56);
					border-radius: 0px 0px 24rpx 24rpx;
					position: absolute;
					top: 152rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}
				.slot-btn{
					text-align: center;
				}
			}
			.form-item-list{
				display: flex;
				align-items: center;
				border-bottom: 1px solid #F5F5F5;
				height: 112rpx;
				&.line-none{
					border-bottom: none;
				}
				.label{
					flex-shrink: 0;
					color: #999;
					margin-right: 48rpx;
				}
			}
		}
	}
	

</style>
